<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
      <el-breadcrumb-item>教师报表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="totalAndCircle">
      <el-card shadow="always" class="totalCard">
        <!--教师总数显示-->
        <p class="title">教师总数:{{ total }}</p>
        <div class="photoAndNums">
          <el-image style="width:80px;height:80px" :src="boyTeacher" fit="contain"></el-image>
          <p>{{ man }}</p>
          <el-image style="width:80px;height:80px" :src="girlTeacher" fit="contain"></el-image>
          <p>{{ woman }}</p>
        </div>
      </el-card>
    </div>

    <el-card shadow="always" id="teacher_tpt">
      <!--每个学院男女比例显示-->
    </el-card>
  </div>
</template>

<script>
import teacher from "@/api/teacher";

export default {
  name: "teacherStatistic",
  data() {
    return {
      girlTeacher: require("../../assets/images/girlTeacher.png"),
      boyTeacher: require("../../assets/images/boyTeacher.png"),
      total: 0,     //教师总数,
      woman: 0,      //女教师
      man: 0,        //男教师
      teacher_tptBarData: [['product', '男', '女']],     //教师职称柱状图显示数据
    }
  },
  mounted() {
    this.getAllTeacherCount();
    this.selectTeacherOrderByTpt();
  },
  methods: {
    getAllTeacherCount() {
      let that = this;
      //获取教师总数量
      teacher.selectCount().then(response => {
        that.total = response.data.data.total;
        that.man = response.data.data.man;
        that.woman = response.data.data.woman
      })
    },
    selectTeacherOrderByTpt() {
      //显示教师职称男女比例
      teacher.selectOrderByTpt().then(response => {
        let datas = response.data.data;
        for (let i = 0; i < datas.length; i++) {
          let arr = [];
          arr.push(datas[i].professional_title);
          arr.push(datas[i].man);
          arr.push(datas[i].woman);
          this.teacher_tptBarData.push(arr);
        }
        this.showTeacher_tptBar();
      })
    },
    showTeacher_tptBar() {
      //显示教师职称男女比例柱状图
      let myChart = this.$echarts.init(document.getElementById('teacher_tpt'), "light");
      let option = {
        color: ['#00BFFF', '#DC143C'],
        title: {
          text: '各职称男女比例',
          left: 'left'
        },
        legend: {},
        tooltip: {},
        dataset: {
          source: this.teacher_tptBarData
        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: [
          {
            type: 'bar',
          },
          {
            type: 'bar',
          }
        ]
      }
      myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 20px;
  font-weight: bold;
}

.el-breadcrumb {
  margin-bottom: 15px;
}

#teacher_tpt {
  width: 99%;
  height: 300px;
  margin: 0 10px;
  padding: 20px;
}

.totalCard, .detailCard {
  width: 50%;
  margin: 10px;
  padding: 5px;
}

.photoAndNums {
  width: 30%;
  margin: 10px auto;
  text-align: center;
  font-size: 30px;
}

.totalAndCircle {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 10px;
}
</style>
